<script src="../node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>
<script src="../node_modules/lit/polyfill-support.js"></script>
<script type="module" src="../my-element.js"></script>
<script type="module" src="../src/ACReveal.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1" />

<style>
@media (hover: none) {
  .ac-reveal:focus {
    background-color: unset;
  }
  .ac-reveal {
    background-color: black;
    transition: background-color 0.3s;
  }
}
.ac-reveal:hover {
  background-color: unset;
}

.ac-reveal {
  background-color: black;
  transition: background-color 0.3s;
}
</style>

<span class="ac-reveal">This is child content</span>

<button id="reset">Reset</button>